<template>
    <div>

      <!--导航栏-->
      <div class="a2">
        <div class="a7">
          <div class="a3">
            <div class="a4"><img src="../../assets/a1.png" height="30" width="110" class="aa"/></div>
            <div class="a5">
              <button class="a5a">
                <router-link :to="'Home'">首页</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'MyActive'">我的活动</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'MyTribe'">我的部落</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'MyInfo'">个人信息</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'SecondClass'">第二课堂成绩单</router-link>
              </button>
              <button class="a5a">APP下载</button>
            </div>
            <div class="a6">
              <div style="width: 300px"></div>
              <div class="a6a"></div>
              <div class="a6a"></div>
              <div class="a6aa"></div>
            </div>
          </div>
        </div>
      </div>


      <!--个人信息-->
      <div class="k1">
        <el-card class="k2">
          <div style="display: flex;justify-content: space-around;align-items: center">
            <!--头像-->
          <div><img style="border-radius: 50%" height="50" width="50" :src="user.photopath" /></div>
            <!--姓名-->
          <div style="font-size: 18px">{{user.username}}</div>
          </div>


        <div style="display: flex;justify-content: center">
          <div style="width: 400px;margin-top: 50px;color: gray">
            <div style="display: flex">
              <div>姓别：</div>
              <div>{{user.sex}}</div>
            </div>
            <div style="border-bottom: 1px solid gray;width: 100%"></div>
            <div style="display: flex;margin-top: 20px">
              <div>年龄：</div>
              <div>{{user.age}}</div>
            </div>
            <div style="border-bottom: 1px solid gray;width: 100%"></div>
            <div style="display: flex;margin-top: 20px">
            <div>手机号：</div>
            <div>{{user.phone}}</div>
           </div>
            <div style="border-bottom: 1px solid gray;width: 100%"></div>
            <div style="display: flex;margin-top: 20px">
            <div>生日：</div>
            <div>{{user.birthday}}</div>
          </div>
            <div style="border-bottom: 1px solid gray;width: 100%"></div>
            <div style="display: flex;margin-top: 20px">
            <div>学制：</div>
            <div>{{user.grade}}</div>
          </div>
            <div style="border-bottom: 1px solid gray;width: 100%"></div>
            <div style="display: flex;margin-top: 20px">
            <div>学号：</div>
            <div>{{user.userNumber}}</div>
          </div>
            <div style="border-bottom: 1px solid gray;width: 100%"></div>
            <div style="display: flex;margin-top: 20px">
              <div>学分：</div>
              <div>{{user.score}}</div>
            </div>
            <div style="border-bottom: 1px solid gray;width: 100%"></div>
            <div style="display: flex;margin-top: 20px">
            <div>信誉分：</div>
            <div>{{user.creditScore}}</div>
          </div>
            <div style="border-bottom: 1px solid gray;width: 100%"></div>
            <div style="display: flex;margin-top: 20px">
            <div>所属专业：</div>
            <div v-if="user.majorId>0">
              <div>{{user.major.name}}</div>
            </div>
          </div>
            <div style="border-bottom: 1px solid gray;width: 100%"></div>
          </div>
        </div>


          <div style="display: flex;justify-content: center">
          <div style="display: flex;justify-content:space-around;width: 400px">
          <div>
          <button style="font-size:14px;cursor: pointer; background: orange;color: white;border-radius: 25px;margin-top: 50px;width: 90px;height: 30px"
          @click="open()"
          >
            完善信息
          </button>
          </div>
          <div>
            <!--<button style="cursor: pointer; background: orange;color: white;border-radius: 25px;margin-top: 50px;width: 90px;height: 30px"-->
            <!--&gt;-->
              <!--我的消息-->
            <!--</button>-->
            <el-button @click="drawer = true"  style="cursor: pointer; background: orange;color: white;border-radius: 25px;margin-top: 50px;width: 90px;height: 30px;display: flex;justify-content: center;align-items: center;">
              <div style="font-size: 14px" @click="getMyNews(uid)">我的消息</div>
            </el-button>
          </div>
          </div>
          </div>
        </el-card>
      </div>


      <!--抽屉  我的消息-->
      <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :with-header="false">
        <div>
          <div class="t4">～～我的消息～～</div>
          <div class="t3"></div>
          <div class="t1">
            <div v-for="(item, index) in myNewsList" :key="index" class="xx">
              {{ item.content }}
              <div>
              {{item.date}}
              </div>
              <div class="t2"></div>
            </div>

          </div>
        </div>
      </el-drawer>


      <!--完善信息-->
      <el-dialog title="完善信息" :visible.sync="dialogFormVisible" @close="clear">
        <el-form :model="user">
          <el-form-item label="上传头像" :label-width="formLabelWidth">
            <el-upload
                class="upload-demo"
                action=""
                :auto-upload="false"
                :on-change="handleChange"
                :on-remove="handleRemove"
                multiple
                :limit="1"
                :show-file-list="true"
                list-type="picture-card"
                :file-list="fileList">
              <!--<el-button size="small" type="primary">点击上传</el-button>-->
              <i class="el-icon-plus"></i>
              <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
          </el-form-item>

          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="user.username" auto-complete="off"></el-input>
          </el-form-item>

          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-radio-group v-model="user.sex">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="user.age" auto-complete="off"></el-input>
          </el-form-item>

          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="user.phone" auto-complete="off"></el-input>
          </el-form-item>

          <el-form-item label="生日" :label-width="formLabelWidth" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
              <el-date-picker
                  v-model="user.birthday"
                  type="date"
                  placeholder="选择日期" value-format="yyyy-MM-dd">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="所属专业" :label-width="formLabelWidth">
            <el-select v-model="user.majorId" placeholder="请选择专业">
              <el-option
                v-for="item in majorList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="学制" :label-width="formLabelWidth">
            <el-input v-model="user.grade" auto-complete="off"></el-input>
          </el-form-item>

          <el-form-item label="学号" :label-width="formLabelWidth">
            <el-input v-model="user.userNumber" auto-complete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="clear">取 消</el-button>
          <el-button style="background: #66B1FF" type="primary" @click="saveUpdate">确 定</el-button>
        </div>
      </el-dialog>



      <!--页尾-->
      <div class="c1">
        <div class="c2">
          <div class="c3">
            <div>到梦简介</div>
            <div>到梦协议</div>
            <div>到梦服务</div>
            <div>第二课堂全国活动查询</div>
            <div>第二课堂全国活动证书查询</div>
            <div>校企共建</div>
            <div>问题与帮助</div>
            <div>联系我们</div>
            <div>APP使用说明</div>
            <div>盗梦空间使用章程和制度</div>
          </div>
          <div class="c4"></div>
          <div class="c5">
            <div>京公网安备11010802024175 到梦空间系统</div>
            <div>2016-2021 Copyright©全国共青团研究中心</div>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
    export default {
      data(){
          return{
            form:{},
            dialogFormVisible:false,
            formLabelWidth:'100px',
            preImgUrl:'',
            user:{},
            phone:'',
            file:'',
            majorList:[],
            fileList:[],
            university:'',
            major:'',
            college:'',
            drawer: false,
            myNewsList:[],
          }
      },
      methods:{

        getMyNews(){
          this.$axios.get('userMessage/findByUid?uid='+this.user.id).then(resp=>{
            this.myNewsList=resp.data
          })
        },

        handleChange(file){
          // console.log(file);
          this.fileList.push(file)
          // this.fileList.push(this.uploadedPhotos)
          console.log('handleChange(file)',this.fileList)
        },
        handleRemove(file, fileList){
          // console.log(file)
          this.fileList=fileList;
          console.log('handleRemove(file,fileList)',this.fileList);
        },
        clear(){
          this.dialogFormVisible=false
          this.fileList=[]

        },
          open(){
            this.dialogFormVisible=true
            this.fileList.push({"url":this.user.photopath})

          },
        getInfo(){
          this.$axios.post("/user/getInfo?phone="+this.phone).then(resp=>{
            console.log("完整的个人信息",resp.data.data)
            let date = new Date(resp.data.data.birthday);
            let formattedDate = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} `;
            resp.data.data.birthday= formattedDate;
            sessionStorage.setItem("user1",JSON.stringify(resp.data.data))
            this.user=JSON.parse(sessionStorage.getItem("user1"))
          })
          },
        saveUpdate(){
          var formData=new FormData();

          Object.keys(this.user).forEach(key=>{
            if (key!="major" &&key!="tribeStaff" && key!='creditScore'&& key!='score'){
              formData.append(key,this.user[key])
            }
          })
          if (this.fileList.length > 0) {
            this.fileList.forEach(file=>{
              if(!file.raw && file.url.indexOf('blob')===-1){
                this.paths.push(file.url)
              }
              else {
                formData.append('photo',file.raw)
              }
            })
            formData.append("paths",this.paths)
          }else {
            this.$alert("请上传图片")
            return
          }
          this.$axios.post('user/update',formData).then(resp=>{
            if (resp.data.code==200) {
              this.$message.success("成功")
            }else{
              this.$message.error("失败")
            }
            this.cleanData()
          })
        },

        getMajorList(){
          this.$axios.get("major/getAll").then(resp=>{
            console.log("专业",resp.data)
            this.majorList=resp.data
          })

        },
        cleanData(){
            this.dialogFormVisible=false
        }

      },
      created() {
          this.user=JSON.parse(sessionStorage.getItem("user1"))
        this.$nextTick(() => {
          this.getMyNews()
          this.phone=this.user.phone
          this.getInfo()
          this.getMajorList()
        });



      }
    }
</script>

<style scoped>
  a{
    color: black;
    text-decoration: none;
  }
  button{
    border: none;
    background-color: transparent;
    box-shadow: none;
  }
  .a2{
    position: relative;
  }
  .a7{
    width: 100%;
    height: 60px;
    position: fixed;
    z-index: 2;
    background:#FFFFFF ;
    box-shadow: 0px 5px 10px 0 #E2E2E2;
  }
  .a3{
    display: flex;
    width: 1210px;
    height: 50px;
    margin: auto;
  }
  .a4{
    width: 100px;
    height: 55px;
    display: grid;

    align-items: center;
    cursor: pointer;
  }
  .a5{
    flex: 1;
    font-size: 13px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .a5a:hover{
    cursor: pointer;
    color: gold;
  }
  .a5a>a:hover{
    cursor: pointer;
    color: gold;
  }
  .a6{
    font-size: 13px;
    width: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .a6a:hover{
    cursor: pointer;
  }
  .a6aa:hover{
    cursor: pointer;
    color: darkgray;
  }
  .c1{
    background: #D6D8DA;
    margin-top: 800px;
    width: 100%;
    height: 100px;
    position: absolute;
  }
  .c2{
    width: 1210px;
    margin: auto;
  }
  .c3{
    height: 40px;
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    align-items: center;
    color: black;
    cursor: pointer;
  }
  .c4{
    border-bottom: 1px solid darkgray;
    margin-top: 10px;
  }
  .c5{
    width: 700px;
    margin: auto;
    margin-top: 20px;
    display: flex;
    font-size: 13px;
    justify-content: space-evenly;
    color: black;
  }
  .k1{
    position: absolute;
    margin-top: 80px;
    width: 100%;
    height: 500px;
  }
  .k2{
    width: 700px;
    margin:auto;
    margin-top: 100px;
    background-color:rgba(33,131,72,0.2);
  }
  .xx{
    font-size: 15px;
    color: gray;
    cursor: pointer;
  }
  .xx:hover{
    color: black;
  }
  .t1{
    width: 400px;
    margin: auto;
    margin-top: 10px;
    font-size: 15px;
  }
  .t2{
    border-bottom: 1px solid gray;
    width: 400px;
    margin: auto;
    margin-top: 10px;
  }
  .t3{
    border-bottom: 1px solid gray;
    width: 400px;
    margin: auto;
    margin-top: 20px;
  }
  .t4{
    margin: auto;
    margin-top:70px;
    text-align: center;
    font-weight: bold;
    font-size: 25px;
  }
</style>
